<template>
    <div id="shop">
        <div class="mytop">
            <svg class="icon" aria-hidden="true" @click="go()">
                <use xlink:href="#icon-shangchuanicon-fuben"></use>
            </svg>
            <p>购物车</p>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
        <div class="con">
            <div class="gologin">
                <p>登录后享受更多优惠<span>去登录></span></p>
            </div>
            <div class="list" v-for="(item,index) in shopCar">
                <div class="list-left">
                    <img src="../../assets/img/shopcar/shop1.jpg" alt="" width="100px">
                </div>
                <div class="list-right">
                    <p>{{item.txt}}</p>
                    <span>售价:</span><span class="price">{{item.price}}</span>
                    <div class="num"><button @click="btn(false,index)">-</button><input type="" name="" :value="item.num"><button @click="btn(true,index)">+</button><img src="../../assets/img/shopcar/shop2.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-left">
                共<span>{{totalprice}}</span>元
            </div>
            <!-- <div class="footer-mid">继续购物</div> -->
            <div class="footer-right">
                去结算
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            totalprice:0,
            shopCar:[
                {
                    pic:'../../assets/img/shopcar/shop1.jpg',
                    txt:'米家驱蚊器智能版 白色',
                    price:139.9,
                    num:1
                },
                {
                    pic:'../../assets/img/shopcar/shop3.jpg',
                    txt:'居家摇头风扇 白色',
                    price:99.9,
                    num:1
                }
            ]
        }
    },
    methods:{
        go(){
            this.$router.go(-1);
        },
        jia(){
		    this.amount=this.amount+1
        },
        jian(){
            if(this.amount!=1)  
            this.amount=this.amount-1
        },
        getTotalPrice(){
            //总价
            let price=0;
            this.shopCar.forEach((item,index)=>{
                price += item.num * item.price
            })
            this.totalprice=price.toFixed(2);
        },
        btn(bool,index){
            let shopIndex=this.shopCar[index];
            if(bool){
                shopIndex.num++;
            }else{
                if(shopIndex.num<=1){
                    return;
                }
                shopIndex.num--;
            }
            this.getTotalPrice();
        }
    },
    mounted(){
        this.getTotalPrice();//页面刷新时调用
    }
}
</script>
<style lang="less" scoped>
        #shop{
            text-align: left;
        }
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            padding: 0 10px;
            }
        .mytop{
                z-index: 5;
                background: #f2f2f2;
                position: fixed;
                left: 0px;
                right: 0px;
                top: 0;
                padding: 10px 0;
                display: flex;
                justify-content: space-between;
            }
        .con{
            padding: 50px 0;
        }
        .gologin{
            line-height: 40px;
            font-size: 17px;
            text-align: left;
            padding: 0 10px;
        }
        .gologin span{
            float: right;
            font-size: 15px;
            color: gray;
        }
        .footer{
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            margin-bottom: 80px;
            display: flex;
            justify-content: space-between;
        }
        .footer-left{
            width: 40%;
            color: #333333;
        }
        .footer-left span{
            font-size: 30px;
            color: #ff5722;
        }
        .footer-mid{
            width: 30%;
            line-height: 40px;
        }
        .footer-right{
            width: 34%;
            line-height: 45px;
            font-size: 18px;
            background-color: #FF6700;
            color: white;
            text-align: center;
        }
        .list{
            display: flex;
            flex-wrap: wrap;
            padding: 10px 20px;
        }
        .list-right{
            margin: 0 15px;
        }
        .list-right .num span{
            margin: 5px;
        }
        .list-right .num img{
            float: right;
        }
        .list-right .price{
            color: red;
            margin: 0 5px;
        }
        .list-right input{
            width: 15px;
        }
</style>
   